Docked Utility Bar

Docked Utility Bar

Docked utility bar is a persistent bar that allows a user to continually use the app to complete tasks while expanding/collapsing utility panels.

Base

Preview

No content has been added for this component.

No content has been added for this component.

<footer class="slds-utility-bar_container" aria-label="Utility Bar">
  <h2 class="slds-assistive-text">Utility Bar</h2>
  <ul class="slds-utility-bar">
    <li class="slds-utility-bar__item">
      <button class="slds-button slds-utility-bar__action" aria-pressed="false">
        <svg class="slds-button__icon slds-button__icon_left" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#call"></use>
        </svg>
        <span class="slds-utility-bar__text">Call</span>
      </button>
    </li>
    <li class="slds-utility-bar__item">
      <button class="slds-button slds-utility-bar__action" aria-pressed="false">
        <svg class="slds-button__icon slds-button__icon_left" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#clock"></use>
        </svg>
        <span class="slds-utility-bar__text">History</span>
      </button>
    </li>
    <li class="slds-utility-bar__item">
      <button class="slds-button slds-utility-bar__action" aria-pressed="false">
        <svg class="slds-button__icon slds-button__icon_left" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#note"></use>
        </svg>
        <span class="slds-utility-bar__text">Notes</span>
      </button>
    </li>
    <li class="slds-utility-bar__item">
      <button class="slds-button slds-utility-bar__action" aria-pressed="false">
        <svg class="slds-button__icon slds-button__icon_left" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#omni_channel"></use>
        </svg>
        <span class="slds-utility-bar__text">
          <span class="slds-m-bottom_xxx-small">Online</span>
          <span>Omni-Channel</span>
        </span>
      </button>
    </li>
  </ul>
  <section class="slds-utility-panel slds-grid slds-grid_vertical" role="dialog" aria-labelledby="panel-heading-01">
    <header class="slds-utility-panel__header slds-grid slds-shrink-none">
      <div class="slds-media slds-media_center slds-size_1-of-1">
        <div class="slds-media__figure slds-m-right_x-small">
          <span class="slds-icon_container">
            <svg class="slds-icon slds-icon_small slds-icon-text-default" aria-hidden="true">
              <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#call"></use>
            </svg>
          </span>
        </div>
        <div class="slds-media__body">
          <h2 id="panel-heading-01">Call</h2>
        </div>
      </div>
      <div class="slds-col_bump-left slds-shrink-none">
        <button class="slds-button slds-button_icon slds-button_icon" title="Close Panel">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#minimize_window"></use>
          </svg>
          <span class="slds-assistive-text">Close Panel</span>
        </button>
      </div>
    </header>
    <div class="slds-utility-panel__body">
      <div class="slds-align_absolute-center">Utility Panel Body</div>
    </div>
  </section>
</footer>

About Base

Fixed bar at the bottom of viewport, contains items


Overview of CSS Classes

Selector.slds-utility-bar_container
Summary

Fixed bar at the bottom of viewport, contains items

Supportdev-ready
Restrictfooter
VariantTrue
Selector.slds-utility-bar
Summary

Fixed bar at the bottom of viewport, contains items

Restrict.slds-utility-bar_container ul
Selector.slds-indicator_unread
Summary

Notification indicator

Restrict.slds-utility-bar abbr
Selector.slds-utility-bar__item
Summary

Items that invoke specific utility bar panel

Restrict.slds-utility-bar li
Selector.slds-has-notification
Summary

Creates styles for a utility bar item when it has a notification within its panel

Restrict.slds-utility-bar__item
Selector.slds-utility-bar__action
Summary

Button that invokes utility panel

Restrict.slds-utility-bar button
Selector.slds-is-active
Summary
Restrict.slds-utility-bar__action
ModifierTrue
Selector.slds-utility-bar__text
Summary

Container for utility bar item text, allows for multi-line text output

Restrict.slds-utility-bar__action > span
Selector.slds-utility-panel
Summary

Container of the utility panel

Restrict.slds-utility-bar_container section
Selector.slds-is-open
Summary
Restrict.slds-utility-panel
ModifierTrue